import React, { Component } from 'react'

import {
  Form,
  Input,
  Button,
  DatePicker,
  Table,
  Card,
  Modal,
  message
} from 'antd'

import '../style.less'
import Distribution from './distirbution'

// 导入数据
import {
  innerDatas,
  innerColumns,
  outterDatas,
  outterColumns
} from '../datas'

// 重复加上多个数据
for (let i = 13; i < 100; i++) {
  outterDatas.push({
    key: i,
    id: 'T' + i,
    goodName: "可乐",
    region: "中国",
    merchants: "物美超市",
    locality: "北京市昌平区",
    pickQuantity: 60,
    quantum: 60,
    date: "2017-07-20",
    condition: "未确认",
  })
}

// 展开方法
const expandedRowRender = () => {
  return (
    <Table className="innerTable" columns={innerColumns} dataSource={innerDatas} pagination={false}/>
  )
}

class Index extends Component {

  // 初始化
  state = {
    selectedRowKeys: [],  // 选择框被选中数量
    visible: false,  // 是否显示
  }

  

  // 显示弹窗
  showModal = () => {
    const {selectedRowKeys} = this.state
    if(selectedRowKeys.length === 1) {
      console.log(selectedRowKeys)
      this.setState({
        visible: true,
      })
    } else if(selectedRowKeys.length < 1) {
      message.error('提货分配至少得选择一笔提货单!')
    }else {
      message.error('提货分配只可以选择一笔提货单!')
    }
  }

  // 关闭弹窗
  closeModal = () => {
    this.setState({
      visible:!this.state.visible
    })
  }

  // 更新选中数量
  onSelectChange = selectedRowKeys => {
    this.setState({ 
      selectedRowKeys 
    })
  }

  render() {
    const { visible } = this.state;
    return (
      <div className="main">
        {/*表单区域*/}
        <Card>
          <h2 className="h2">商品提货</h2>
          <Form layout="inline" >
            <div className="shop-top">
              <Form.Item className="top1" label="提货单号">
                <Input placeholder="请输入单号" />
              </Form.Item>

              <Form.Item className="top2" label="商品名称">
                <Input placeholder="请输入名称" />
              </Form.Item>
            </div>
            <div className="shop-bottom">
              <Form.Item className="bottom1" label="商家名称">
                <Input placeholder="请输入商家" />
              </Form.Item>

              <Form.Item className="bottom2" label="交货日期">
                <DatePicker.RangePicker />
              </Form.Item>
            </div>

            <Form.Item className="check">
              <Button type="primary" htmlType="submit">查询</Button>
              <Button  htmlType="submit">清空</Button>
            </Form.Item>
          </Form>
        </Card>

        {/*表格区域*/}
        <Card
          extra={(
            <div className="distribution">
              <Button type="primary">确认提货</Button>
              <Button type="primary" onClick={this.showModal}>提货分配</Button>
              <Button>取消分配</Button>
            </div>
          )}
        >
          <Table
            rowSelection={{
              type: 'checkbox',
              selectedRowKeys: this.state.selectedRowKeys,
              onChange: this.onSelectChange
            }}
            columns={outterColumns} dataSource={outterDatas}
            expandable={{ expandedRowRender }}
          />
        </Card>

        {/*弹窗区域*/}
        <Modal className="modal" title="提货分配" visible={visible} closable={false} footer={null}
        >
          {/*引入子组件*/}
          <Distribution close={this.closeModal}/>
        </Modal>
      </div>
    )
  }

}
export default Index;
